{% load static %}
{% include 'huiyiyuding/core/base.html' %}

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>{{ user.username }}个人资料</legend>
</fieldset>

<table class="layui-table" lay-even="" lay-skin="nob">
  <colgroup>
    <col width="150">
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
  <tr>
      <td>
          <div class="layui-upload">
  <button type="button" class="layui-btn" id="test1">上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1">
    <p id="demoText"></p>
  </div>
  <div style="width: 95px;">
    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
      <div class="layui-progress-bar" lay-percent=""></div>
    </div>
  </div>
</div>
      </td>
  </tr>
    <tr>
        {% for users in user %}
      <th>用户名:</th>
      <th>{{ users.username }}</th>
        {% endfor %}
    </tr>
  </thead>
  <tbody>
{#    <tr>#}
{#      {% for users in user %}#}
{#      <td></td>#}
{#      {% endfor %}#}
{##}
{#    </tr>#}
    <tr>
        {% for users in user %}

      <td>真实姓名：</td>
      <td>{{ users.fullname }}</td>
        {% endfor %}

    </tr>
    <tr>
        {% for users in user %}

      <td>性别：</td>
      <td>{{ users.gender }}</td>
        {% endfor %}
    </tr>
    <tr>
        {% for users in user %}

      <td>所在部门：</td>
      <td>{{ users.department }}</td>
        {% endfor %}
    </tr>
    <tr>
        {% for users in user %}

      <td>手机号码：</td>
      <td>{{ users.phone }}</td>
        {% endfor %}
    </tr>
      <tr>
        {% for users in user %}

      <td>电子邮箱：</td>
      <td>{{ users.email }}</td>
        {% endfor %}
    </tr>
  </tbody>
</table>

<script>
layui.use(['upload', 'element', 'layer'], function(){
  var $ = layui.jquery
  ,upload = layui.upload
  ,element = layui.element
  ,layer = layui.layer;

  //常规使用 - 普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });

      element.progress('demo', '0%'); //进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功的一些操作
      //……
      $('#demoText').html(''); //置空上传失败的状态
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
    //进度条
    ,progress: function(n, elem, e){
      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });


{% include 'huiyiyuding/core/foot.html' %}
